import * as React from 'react';
import { View, Text, Button } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { 
  createDrawerNavigator,
  DrawerContentScrollView,
  DrawerItemList,
  DrawerItem
} from '@react-navigation/drawer';
import Ionicons from 'react-native-vector-icons/Ionicons'

function Feed({ navigation }) {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text style={{fontSize: 40}}>Feed Screen</Text>
      <Button title="Open drawer" onPress={() => navigation.openDrawer()} />
      <Button title="Toggle drawer" onPress={() => navigation.toggleDrawer()} />
    </View>
  );
}

function Notifications() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text style={{fontSize: 40}}>Notifications Screen</Text>
    </View>
  );
}

const Drawer = createDrawerNavigator();

export default function App(props) {
  return (
    <NavigationContainer>
      <Drawer.Navigator
        drawerPosition={'right'} // 菜单右侧显示
        drawerType="slide" // 设置菜单动画效果
        drawerStyle={{
          backgroundColor: '#dfb', // 设置菜单背景色
          width: 180, // 设置菜单宽度
        }}
        drawerContentOptions={{
          activeTintColor: '#e91e63', // 设置活跃字体颜色
          itemStyle: { // 设置菜单项样式
            marginVertical: 10 // 设置菜单的垂直外间距
          },
        }}
      >
        <Drawer.Screen name="Feed" component={Feed} options={{ 
          title: 'Feed',
          drawerIcon: ({focused, color, size}) => {
            return (
              <Ionicons name={"person-outline"} size={size} color={color} />  
            )
          }
        }} />
        <Drawer.Screen name="Notifications" component={Notifications} options={{ 
          title: '通知',
          drawerIcon: ({focused, color, size}) => {
            return (
              <Ionicons name={"chatbubble-ellipses-outline"} size={size} color={color} />  
            )
          },
          headerShown: true
        }}/>
      </Drawer.Navigator>
      
      {/* <DrawerContentScrollView {...props}>
        <DrawerItemList {...props} />
        <DrawerItem
          label="Help"
          onPress={() => Linking.openURL('https://mywebsite.com/help')}
        />
      </DrawerContentScrollView> */}
    </NavigationContainer>
  );
}
